<script setup lang="ts">
  import { useRouter } from "vue-router";
  import { emConnectListener } from "@/easemob/emListener";
  //挂载连接监听
  /*
   * 该监听的意义在于，当连接状态发生变化时，会触发该监听.
   * 开发者可以在该监听中处理一些业务逻辑，
   * 比如：重新连接中、断开连接等。
   **/
  emConnectListener();
  const { t } = useI18n();
  const menuItems = computed(() => [
    { title: t("menus.liveChatroom"), route: "live-chatroom" },
  ]);
  const loginUserId = ref("");
  const loginUserPwd = ref("");
  const router = useRouter();
  const entryLiveChatroom = () => {
    router.push({
      name: "live-chatroom",
      query: {
        userId: loginUserId.value,
        userPwd: loginUserPwd.value,
      },
    });
  };
</script>

<template>
  <van-field v-model="loginUserId" label="环信ID" placeholder="请输入环信ID" />
  <van-field v-model="loginUserPwd" label="环信密码" placeholder="请输入环信密码" />
  <van-divider> 输入环信用户名密码点击下方cell登录 </van-divider>
  <template v-for="item in menuItems" :key="item.route">
    <VanCell :title="item.title" @click="entryLiveChatroom" is-link />
  </template>
</template>

<route lang="json">
{
  "name": "home",
  "meta": {
    "title": "主页",
    "i18n": "menus.home"
  }
}
</route>
